<template>
    <div style="background-color: #F2F2F2 !important; height: 100vh;">
        <div class="van-nav-bar__content" style="background-color: #FFFFFF;">
            <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow"><!----></i><span
                    class="van-nav-bar__text" @click="Loss">返回</span></div>
            <div class="van-nav-bar__title van-ellipsis"></div>
        </div>
        <!-- 中间内容部分 -->
        <div style="height: calc(100vh - 100px); overflow-y: auto;">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="height: 90vw">
                <van-swipe-item v-for="(item, index) in banner"><img :src="item" alt="" width="100%"
                        height="100%"></van-swipe-item>
            </van-swipe>
            <div class="info">
                <div><span class="top-left">￥{{ info.retailPrice }}.00</span><span class="top-right">{{ info.counterPrice
                }}.00</span></div>
                <div style="font-size: 14px;">{{ info.name }}</div>
                <div style="font-size: 12px; color: #999999; margin-top: 5px;">{{ info.brief }}</div>
            </div>

            <div data-v-008e9502="" class="van-cell-group van-hairline--top-bottom" style="margin-top: 20px;">
                <div data-v-008e9502="" role="button" tabindex="0" class="van-cell van-cell--clickable" @click="shoppings">
                    <div data-v-008e9502="" class="van-cell__title"><span data-v-008e9502="">规格</span></div>
                    <div data-v-008e9502="" class="van-cell__value"><span data-v-008e9502="">请选择</span></div><i
                        data-v-008e9502="" class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
                </div>
                <div data-v-008e9502="" role="button" tabindex="0" class="van-cell van-cell--clickable" @click="shu">
                    <div data-v-008e9502="" class="van-cell__title"><span data-v-008e9502="">属性</span></div><i
                        data-v-008e9502="" class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
                </div>
                <div data-v-008e9502="" class="van-cell">
                    <div data-v-008e9502="" class="van-cell__title"><span data-v-008e9502="">运费</span></div>
                    <div data-v-008e9502="" class="van-cell__value"><span data-v-008e9502="">满88免邮费</span></div>
                </div>
            </div>
            <!-- 详细 -->

            <div class="minute">
                <p style="text-align: center; background-color: white; padding: 10px 0;">商品详细</p>
                <div v-html="info.detail" style="background-color: white; font-size: 14px;"></div>
            </div>
        </div>
        <!-- 底部付钱 -->
        <div data-v-008e9502="" class="van-goods-action">
            <!-- 弹出框属性 -->
            <van-action-sheet v-model="show" title="商品属性">
                <div class="content">
                    <div data-v-6e00e50c="" class="van-cell-group van-hairline--top-bottom"
                        v-for="(item, index) in attributes" :key="index">
                        <div data-v-6e00e50c="" class="van-cell">
                            <div data-v-6e00e50c="" class="van-cell__value van-cell__value--alone">
                                <div data-v-6e00e50c="" class="van-row">
                                    <div data-v-6e00e50c="" class="van-col van-col--8">{{ item.attribute }}</div>
                                    <div data-v-6e00e50c="" class="van-col van-col--16">{{ item.value }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-action-sheet>
            <!-- 弹出框加入购物车 -->
            <van-action-sheet v-model="shopping" title="">
                <div class="content">
                    <!-- 最上面 -->
                    <div class="van-sku-header van-hairline--bottom">
                        <div class="van-image van-sku-header__img-wrap"><img :src="productList.url" class="van-image__img"
                                style="object-fit: cover;" width="100%" height="100%"></div>
                        <div class="van-sku-header__goods-info">
                            <div class="van-sku__goods-price"><span class="van-sku__price-symbol">￥</span><span
                                    class="van-sku__price-num">{{ productList.price }}</span></div>
                            <div class="van-sku-header-item">已选 {{ productList.specifications }}</div>
                        </div>
                    </div>
                    <!-- 中间的 -->
                    <div class="van-sku-row van-hairline--bottom">
                        <div class="van-sku-row__title" style="font-size: 14px; font-weight:bold;">{{
                            specificationList.specification }}</div><span
                            class="van-sku-row__item van-sku-row__item--active">
                            <div class="van-sku-row__item-name">{{ specificationList.value }}</div>
                        </span>
                    </div>
                    <!-- 第三部分点击加数量 -->
                    <div class="van-sku-stepper-stock">
                        <div class="van-sku__stepper-title" style="font-size: 14px; font-weight:bold;">购买数量</div>
                        <div class="van-stepper van-sku__stepper">
                            <button style="color: black;" type="button" :disabled="disabled"
                                class="van-stepper__minus van-stepper__minus--disabled" @click="minus"></button>
                            <input type="tel" :value="num" role="spinbutton" inputmode="numeric" aria-valuemax="100"
                                aria-valuemin="1" aria-valuenow="1" class="van-stepper__input">
                                
                            <button type="button" class="van-stepper__plus" @click="plus"></button>
                        </div>
                    </div>
                    <!--最后一部分点击购买 -->
                    <div class="van-sku-actions podf"><button class="van-button van-button--warning van-button--large"
                            @click="add">
                            <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
                        </button><button class="van-button van-button--danger van-button--large">
                            <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
                        </button></div>
                </div>
            </van-action-sheet>
            <!-- 付钱功能 -->
            <div data-v-008e9502="" role="button" tabindex="0" class="van-goods-action-icon" @click="cont">
                <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
                    <div class="van-info">{{ data }}</div>
                </div>
            </div>
            <div data-v-008e9502="" role="button" tabindex="0" class="van-goods-action-icon" @click="cele">
                <div class="van-icon van-icon-star-o van-goods-action-icon__icon"><!----></div>
            </div>
            <button data-v-008e9502="" @click="shoppings"
                class="van-button van-button--warning van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--warning">
                <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
            </button><button data-v-008e9502="" @click="shoppings"
                class="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--last van-goods-action-button--danger">
                <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
            </button>
        </div>
    </div>
</template>
<script>
import { detail, post, adds, collect, count } from "../../api/index"
import { Notify, Toast } from 'vant';
export default {
    name: "shop",
    data() {
        return {
            banner: "",
            info: "",
            show: false,
            attributes: "",
            shopping: false,
            productList: "",
            specificationList: "",
            num: 1,
            disabled: false,
            data: ""
        }
    },
    methods: {
        cont(){
            this.$router.push({path: '/trolley'})
        },
        cele() {
            console.log(this.$route.query.id)
            // {valueId: "1130041", type: 0}
            collect({ valueId: this.$route.query.id, type: 0 }).then(res => {
                console.log(res)
                if (res.data.errmsg == "请登录") {
                    Toast({
                        message: res.data.errmsg,
                        position: 'center',

                    });
                    setTimeout(() => {
                        this.$router.push({ path: '/login' })
                    }, 1000)
                } else {
                    Toast.fail('收藏成功');
                }
            })
        },
        // 减号
        minus() {
            // console.log(1)
            // this.num--

            if (this.num < 2) {
                // this.disabled=false
                alert("已到达最少")
            } else {
                this.num--
                // this.disabled=true
            }
        },
        plus() {
            this.num++
        },
        Loss() {
            this.$router.go(-1);
        },
        shu() {
            this.show = true
        },
        shoppings() {
            this.shopping = true
        },
        // 加入购物车
        // {goodsId: this.productList.goodsId, number: this.num, productId:this.productList.id }
        add() {
            adds({ goodsId: this.productList.goodsId, number: this.num, productId: this.productList.id }).then(res => {
                console.log(res)
                Toast.loading({
                    message: '加载中...',
                    forbidClick: true,
                });
                setTimeout(() => {
                    Toast({
                        message: '加入成功',
                        icon: 'like-o',
                    });

                }, 800)
                count().then(res => {
                    console.log(res.data.data)
                    this.data = res.data.data
                })
            })
        }
    },
    mounted() {
        count().then(res => {
                    console.log(res.data.data)
                    this.data = res.data.data
                })
        // post().then(res => {
        //     console.log(res)
        // })
        var num = this.$route.query.id
        detail({ id: num }).then(res => {
            console.log(res.data.data)
            this.banner = res.data.data.info.gallery
            this.info = res.data.data.info
            this.attributes = res.data.data.attribute
            // productList
            this.productList = res.data.data.productList[0]
            // specificationList
            this.specificationList = res.data.data.specificationList[0].valueList[0]

            console.log(this.productList.id, this.productList.goodsId)

        })
        // console.log(this.$route.params.id.id)
    }
}
</script>
<style lang="scss">
.podf {
    width: 93%;
    padding: 0;
    position: absolute;
    bottom: 15px;

    // text-align: center;
    button {
        // width: 45%;
        // text-align: center;
    }
}

.minute {
    margin-top: 20px;

    p {
        margin: -4px;
        // height: 32.333vw;
    }

    img {
        width: 100%;
        height: 100%;
    }
}

.content {
    height: 260px;
    padding: 16px 16px 160px;
}

.info {
    position: relative;

    width: 93%;
    height: 70px;
    // border: 1px solid red;
    padding: 10px 16px;
    background-color: white;

    .top-left {
        font-size: 14px;
        color: #db3d3c;
        margin-right: 10px;
    }

    .top-right {
        font-size: 12px;
        text-decoration: line-through;
        color: gray;
    }
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
</style>

